<template>
  <div class="contain">
    <div class="contain-login">
      <div>
        <div class="login-form">
          <div class="title">东岚助手管理系统</div>
          <a-row class="row">
            <div class="border"></div>
          </a-row>
          <template v-if="!isRetrieve">
            <a-row class="row">
              <a-col :span="5">
                <div class="login-title">
                  <!--              <a-icon type="user" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">用户名：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="14">
                <a-input placeholder="请输入用户名" allowClear v-model="username"/>
              </a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="5">
                <div class="login-title">
                  <!--              <a-icon type="lock" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">密码：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="14">
                <a-input-password placeholder="请输入密码" allowClear v-model="password"/>
              </a-col>
            </a-row>
          </template>
          <template v-else>
            <a-row class="row">
              <a-col :span="5">
                <div class="login-title">
                  <!--              <a-icon type="lock" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">邮箱：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="14">
                <a-input placeholder="请输入邮箱" allowClear v-model="email"/>
              </a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="5">
                <div class="login-title">
                  <!--              <a-icon type="lock" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">验证码：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="8">
                <a-input placeholder="请输入验证码" allowClear v-model="code"/>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="4">
                <a-button type="primary" @click="sendVerCode">发验证码</a-button>
              </a-col>
              <a-col :span="1"></a-col>
            </a-row>
            <a-row class="row">
              <a-col :span="5">
                <div class="login-title">
                  <!--              <a-icon type="lock" :style="{ fontSize: '17px'}"/>-->
                  <div class="row-title">新密码：</div>
                </div>
              </a-col>
              <a-col :span="1"></a-col>
              <a-col :span="14">
                <a-input-password placeholder="请输入新密码" allowClear v-model="newPwd"/>
              </a-col>
            </a-row>
          </template>
          <template>
            <a-row v-if="isRetrieve">
              <a-col :offset="18" :span="4">
                <div class="retrieve-pwd" title="返回登录" @click="returnLogin"> 返回登录</div>
              </a-col>
            </a-row>
            <a-row v-else>
              <a-col :offset="18" :span="4">
                <div class="retrieve-pwd" title="找回密码" @click="toRetrieve"> 找回密码</div>
              </a-col>
            </a-row>
          </template>
          <a-row class="row btn-margin">
            <div>
              <template>
                <a-button type="primary" @click="retrievePwd" v-if="isRetrieve">找回</a-button>
                <a-button type="primary" @click="login" v-else>登录</a-button>
              </template>
              <a-button class="btn-space" @click="reset">重置</a-button>
            </div>
          </a-row>
        </div>
      </div>
    </div>
<!--    <div class="footer">-->
<!--      <a href="https://beian.miit.gov.cn/" target="_blank" class="beian">粤ICP备2021019241号-1</a>-->
<!--    </div>-->
  </div>
</template>

<script>
   import {loginUser,findPwd,sendCode} from '../api/index';
  // import Cookies from 'js-cookie';

  export default {
    name: "Login.vue",
    data(){
      return{
        username: '',
        password: '',
        email: '',    //邮箱
        code: '',     //验证码
        newPwd: '',   //新密码
        isRetrieve: false,
      //  verificationCode: '',     //验证码值
       // code: '',                 //验证码输入框
      //  isAutoLogin: false        //是否自动登录
      }
    },
    created() {
      //自动登录
      // this.autoLogin();
      //生成验证码
      // this.generateVerifyCode();
    },
    methods: {
      //发送验证码到邮箱
      sendVerCode(){
        let params = {};
        var regex = /^([0-9A-Za-z\-_\.]+)@([0-9a-z]+\.[a-z]{2,3}(\.[a-z]{2})?)$/g;
        if (this.email){
          if(regex.test(this.email)){
            //邮箱格式正确
            params = {
              email: this.email
            }
            sendCode(params)
              .then((res) => {
                if (res.status == 200){
                  this.$message.success("已发送验证码至邮箱，请前往邮箱查看验证码！");
                }else{
                  this.$message.error(res.msg);
                }
              })
              .catch((err) => {
                this.$message.error("对不起，没有用户绑定过该邮箱！");
              })
          }else{
            this.$message.error("邮箱地址格式错误，请重新输入！");
          }
        }else{
          this.$message.info("邮箱不能为空！");
        }
      },
      //找回密码
      retrievePwd(){
        if (this.code && this.newPwd && this.email){
          let params = {
            email: this.email,
            code: this.code,
            password: this.newPwd
          }
          findPwd(params)
            .then((res) => {
              if (res.status == 200){
                this.$message.success("修改密码成功！");
                this.isRetrieve = false
              }
            })
            .catch((err) => {
              this.$message.error("验证码错误！");
            })
        }else{
          this.$message.info("信息不能为空，请重新输入！");
        }
      },
      //返回登录状态
      returnLogin(){
        this.email = ''
        this.newPwd = ''
        this.code = ''
        this.isRetrieve = false
      },
      //切换成找回密码状态
      toRetrieve(){
        this.password = ''
        this.username = ''
        this.isRetrieve = true
      },
      //登录
      login(){
        if (this.username && this.password){
          let params = {
            username: this.username,
            password: this.password
          }
          let group = "";
          loginUser(params)
            .then((res) => {
              console.log("res",res)
              if (res.status == 200){
                window.localStorage.setItem('token', res.token)
                window.localStorage.setItem('username', res.user.username)
                window.localStorage.setItem('level', res.user.level)
                if (res.user.level == "超级管理员" || res.user.level == "授权管理员"){
                  group = res.user.username
                }else if(res.user.level == "普通用户"){
                  group = res.user.group
                }
                window.localStorage.setItem('group', group)
                this.$message.success('登录成功！');
                this.$router.replace('/index')
              }
            })
          .catch((err) => {
            this.username = ''
            this.password = ''
            this.$message.error("用户名或密码错误！");
          })
        }else {
          this.$message.info('用户名跟密码不能为空！');
        }
        // if (this.code){
        //   if(this.code.toLowerCase() == this.verificationCode.toLowerCase()){
        //     if(this.username && this.password){
        //
        //       let params = {
        //         uWorknumber: this.username,
        //         uPassword: this.password
        //       }
        //       console.log("params",params)
        //       login(params)
        //         .then((res) => {
        //           console.log("res",res)
        //           if (res.msg == "SUCCESS"){
        //             //自动登录
        //             if (this.isAutoLogin){
        //               window.localStorage.setItem('username', this.username)
        //               window.localStorage.setItem('password', this.password)
        //             }
        //             //本地保存当前信用户信息
        //             window.localStorage.setItem('userInfo.uName', res.data.uName)
        //             window.localStorage.setItem('userInfo.isadmin', res.data.isadmin)
        //             window.localStorage.setItem('userInfo.uId', res.data.uId)
        //             window.localStorage.setItem('userInfo.uPhone', res.data.uPhone)
        //             window.localStorage.setItem('userInfo.uWorknumber', res.data.uWorknumber)
        //             //本地保存token
        //             Cookies.set('accessToken', document.cookie.substring(6));
        //             window.localStorage.setItem('token',document.cookie.substring(6))
        //
        //             this.$message.success("登录成功！");
        //             this.$router.replace('/index')
        //           }else{
        //             this.$message.error(res.msg);
        //             this.username = ''
        //             this.password = ''
        //             this.code = ''
        //           }
        //         })
        //     }else {
        //       this.$message.info('用户名跟密码不能为空！');
        //     }
        //   }else{
        //     this.$message.error("验证码错误，请重新输入！");
        //   }
        // }else{
        //   this.$message.info('验证码不能为空！');
        // }
      },
      //生成验证码
      // generateVerifyCode(){
      //   generateCode()
      //     .then((res) => {
      //       if (res.msg == "SUCCESS"){
      //         this.verificationCode = res.data
      //       }
      //     })
      // },
      //刷新二维码
      // refreshCode(){
      //   this.generateVerifyCode()
      // },
      //是否自动登录
      // onChange(e){
      //   this.isAutoLogin = e.target.checked
      //   console.log(`checked = ${e.target.checked}`);
      // },
      //重置
      reset(){
        this.username = ''
        this.password = ''
        this.code = ''
        this.newPwd = ''
        this.email = ''
      }

    }
  }
</script>

<style scoped>
  .contain{
    width: 100%;
    height: 100vh;
    /*background-image: url("../assets/sky2.jpg");*/
    /*background-position: center center;*/
    /*background-size:cover;*/
    background: #001529;

  }
  .contain-login{
    width: 100%;
    height: 95%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .login-form{
    width: 430px;
    background: rgba(255,255,255,1);
    padding: 10px;
    margin-top: 30px;
    border-radius: 5px;
    display: flex;
    flex-direction: column;
    /*align-items: center;*/
  }
  .title{
    color: #001529;
    font-weight: 600;
    font-size: 20px;
    margin-top: 15px;
    margin-bottom: 5px;
  }
  .border{
    background: #001529;
    width: 100px;
    height: 2px;
    margin-bottom: 20px;
  }
  .login-title{
    display: flex;
    flex-direction: row;
    justify-content: right;
    justify-items: right;
    align-items: center;
    padding: 5px;
  }
  .row{
    display: flex;
    flex-direction: row;
    justify-items: center;
    justify-content: center;
    margin-bottom: 15px;
  }
  .row-title{
    font-size: 16px;
  }
  .vertify{
    /*background-image: url("../assets/vertify_code.jpg");*/
    width: 60px;
    height: 80%;
    font-size: 22px;
    vertical-align: middle;
    cursor: pointer;
    /*height: 50px;*/
  }
  .btn-space{
    margin-left: 80px;
  }
  .btn-margin{
    margin-top: 30px;
  }
  .beian{
    text-decoration: none;
    cursor: pointer;
    color: #efefef;
    width: 100%;
    height: 5%;
  }
  .beian:hover{
    color: #ffffff;
  }
  .retrieve-pwd{
    color: #666;
    font-size: 13px;
  }
  .retrieve-pwd:hover{
    cursor: pointer;
    color: #001529;
    /*text-align: right;*/
  }
</style>